<template>
	<view class="activity-detail-container">
		<CustomNav :nav-info="navInfo" />
		<view class="activity-detail-container-top">
			<view class="activity-detail-container-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/activity/detail-banner.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="activity-detail-container-info1">
			<view class="header">
				<view class="title">
					活动“人才夜市”火热出摊
				</view>
				<view class="num">
					20/40
				</view>
			</view>
			<view class="date mt-20">
				<view>活动时间：<text style="color: #292F38">2023.02.23 14:00-2023.03.23 14:00</text></view>
				<view>报名时间：<text style="color: #292F38">2023.02.23 14:00-2023.03.23 14:00</text></view>
			</view>
			<view class="address mt-20">
				<uni-icons type="location" size="24"></uni-icons>无锡市梁溪区
			</view>
			<view class="address">
				无锡市梁溪区沿江大道特166号
			</view>
		</view>
		<view class="activity-detail-container-info2">
			<view class="title">
				活动内容
			</view>
			<view class="content">
				1、完成网络系统架构和方案设计：完成网络集成项目中系统网络架构及方案设计；
			</view>
			<view class="content">
				2、完成产品配置和选型：完成项目设计中网络产品配置及选型；
			</view>
			<view class="content">
				3、负责网络故障的排除和优化工作：负责项目中网络的监控巡检，故障排除、割接、优化等工作；
			</view>
			<view class="content">
				4、负责售后技术支持：负责目标客户的售后技术支持，现场维护、产品使用培训等工作；
			</view>
		</view>
		<view class="comment">
			<image style="width:100%"  src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/activity/detail-comment.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	export default {
		components: {
			CustomNav
		},
		data() {
			return {
				navInfo: {
					bg_color: 'transparent',
					color: "#fff",
					name: '活动详情'
				},
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.activity-detail-container {
	min-height: 100vh;
	background-color: #F4F6F8;
	&-top {
		position: relative;
	}
	&-info1 {
		margin-top: -100rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		// z-index: 100;
		.header {
			display: flex;
			justify-content: space-between;
		}
		.title {
			font-size: 40rpx;
			font-weight: 600;
			color: #292F38;
			line-height: 32rpx;
		}
		.num {
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			line-height: 33rpx;
		}
		.date {
			font-size: 24rpx;
			font-weight: 400;
			color: #767B84;
			line-height: 33rpx;
		}
		.address {
			font-size: 24rpx;
			font-weight: 400;
			color: #000000;
			line-height: 33rpx;
		}
	}
	&-info2 {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #211D1D;
			line-height: 50rpx;
		}
		.content {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #211D1D;
		}
	}
	.comment {
		width: 100%;
		margin-top: 20rpx;
	}
}
</style>
